import React from 'react'
import { useState, useRef } from 'react'
import { Col, Row, Button, Input } from 'antd'
import axios from 'axios'

export default function MovieList() {
  const [movie, setmovie] = useState([])
  const inputText = useRef('')

  const inputChange = (event) => {
    inputText = event.target.value
  }

  const searchChange = () => {
    axios.get('http://localhost:5000/movieList').then(res => {
      console.log(res);
      setmovie(res.data[0])
    })
  }
  return (
    <div>
      <div>
        <Row>
          <Col span={4}>
            <Input placeholder="请输入影视名称" onChange={inputChange} ref={inputText} type="text" />
          </Col>
          <Col span={3}>
            <Button style={{ marginLeft: '6px' }} type="primary" onClick={() => searchChange()}>查询</Button>
          </Col>
        </Row>
      </div>
      <div>
        <video src={'https://vd4.bdstatic.com/mda-ngw17e22w7kqikb6/sc/cae_h264/1659232416430415858/mda-ngw17e22w7kqikb6.mp4?v_from_s=hkapp-haokan-nanjing&auth_key=1673923956-0-0-6118deeff083ff522de6a91d7c2721f6&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=1356122635&vid=10390451885912540998&abtest=&klogid=1356122635'} type={'video/mp4'} controls muted autoPlay>
        </video>
      </div>
    </div>
  )
}
